<template>
	<view class="detail-box">
		<view class="item">
			<view class="top">
				<image :src="detail.subjectFirstPage" class="img"></image>
				<view class="r">
					{{detail.goodsName}} <text class="x">X{{detail.goodsCount}}</text>
					<view class="price">
						<text class="t">￥</text>{{detail.goodsTotalPrice}}
					</view>
					<view class="time">{{detail.createTime}}</view>
				</view>
			</view>
			<view class="info-list mt">
				姓名：<view class="r-txt">{{detail.userName}}</view>
			</view>
			<view class="info-list mt">
				手机号：<view class="r-txt">{{detail.tele}}</view>
			</view>
			<view class="info-list mt">
				收货地址：<view class="r-txt">{{detail.address}}</view>
			</view>
			<view class="info-list mt">
				订单编号：<view class="r-txt">{{detail.id}}</view>
			</view>
			<view class="info-list">
				创建时间：<view class="r-txt">{{detail.createTime}}</view>
			</view>
			<view class="info-list">
				付款方式：<view class="r-txt">{{detail.paymentType ==1 ?'微信支付':'其他'}}</view>
			</view>
			<view class="info-list">
				支付时间：<view class="r-txt">{{detail.createTime}}</view>
			</view>
			<view class="info-list">
				订单金额：<view class="r-txt price">¥{{detail.payAmount}}</view>
			</view>
			<view class="bnt" @tap="cancelOrder" v-if="detail.goodsOrderStatus ==1">
				取消订单
			</view>
			<view class="bnt" @tap="aftOrder" v-if="detail.orderStatus ==6">
				问题反馈
			</view>
		</view>
	</view>
</template>

<script>
	import {getGoodsOrderInfo,getCancelGoodsOrder} from '@/api/order.js'
	export default {
		data() {
			return {
				detail: {}
			};
		},
		onLoad(ops) {
			this.def = ops
			this.getInfo()
		},
		methods:{
			aftOrder(){
				uni.navigateTo({
					url: '/pagesA/aftermarket/subRefunds?id='+this.detail.id + '&orderType=2'
				})
			},
			getInfo(){
				getGoodsOrderInfo({id:this.def.id}).then((res) =>{
					this.detail = res
				})
			},
			cancelOrder(){
				uni.showToast({
					title: '订单已取消',
					icon: 'none'
				})
				getCancelGoodsOrder({orderId:this.def.id}).then((res) =>{
					uni.showToast({
						title: '订单已取消',
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.detail-box{
	margin: 0 32rpx;
	padding-top: 32rpx;
	.item{
		// height: 280rpx;
		border-radius: 24rpx;
		background-color: #fff;
		padding: 32rpx;
		margin-bottom: 32rpx;
	}
	.top{
		display: flex;
		position: relative;
		.img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 36rpx;
		}
		.r{
			font-size: 30rpx;
			color: #333;
			padding-top: 10rpx;
			flex: 1;
			.x{
				color: #666666;
				float: right;
			}
			.price{
				color: #E4919D;
				margin-top: 46rpx;
				font-size: 36rpx;
			}
			.t{
				font-size: 22rpx;
			}
			.time{
				color: #AAAAAA;
				font-size: 28rpx;
				padding-top: 12rpx;
			}
		}
	}
	
	.info-list{
		display: flex;
		align-items: center;
		color: #AAAAAA;
		font-family: PingFangSC-Regular;
		font-size: 30rpx;
		margin-bottom: 32rpx;
		.r-txt{
			color: #3D3D3D;
			flex: 1;
			text-align: right;
		}
		.price{
			color: #E4919D;
		}
	}
	.mt{
		margin-top: 82rpx;
	}
	.bnt{
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		border-radius: 50rpx;
		border: 2rpx solid #E4919D;
		color: #E4919D;
		font-size: 36rpx;
		margin-top: 66rpx;
	}
}
</style>
